<template>
  <div>
    <div v-for="value in source" :key="value">{{ value }}</div>
    <div v-if="ifRef" @click="$emit('changeValue1', 'ifRef')">ifRef</div>
    <slotDiv id="slot1" @click="changeClick"> </slotDiv>
    <slotDiv id="slot2">
      <div>这是插槽内容</div>
      <template #body> <div>这是插槽body内容</div></template>
    </slotDiv>

    <!-- 异步组件示例 -->
    <div>
      <h3>异步组件演示</h3>
      <button @click="showAsyncComponent = !showAsyncComponent">
        {{ showAsyncComponent ? '隐藏' : '显示' }}异步组件
      </button>
      <Suspense>
        <template #default>
          <AsyncDemo v-if="showAsyncComponent" />
        </template>
        <template #fallback>
          <div>加载中...</div>
        </template>
      </Suspense>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, defineAsyncComponent } from 'vue'
import slotDiv from './components/slot.vue'

// 定义异步组件（带配置选项）
const AsyncDemo = defineAsyncComponent({
  // 加载函数
  loader: () => import('./components/AsyncDemo.vue'),

  // 加载中显示的组件
  loadingComponent: {
    template:
      '<div style="padding: 10px; background: #f0f0f0; border-radius: 4px;">组件加载中...</div>'
  },

  // 加载失败时显示的组件
  errorComponent: {
    template:
      '<div style="padding: 10px; background: #ffebee; color: #c62828; border-radius: 4px;">组件加载失败</div>'
  },

  // 延迟显示加载组件的时间（毫秒）
  delay: 200,

  // 超时时间（毫秒）
  timeout: 3000,

  // 是否可挂起
  suspensible: true
})

const source = ref([1, 2, 3])
const ifRef = ref(true)
const showAsyncComponent = ref(false)
const props = defineProps({
  test: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['changeValue1'])
const modelValue = defineModel({ default: () => ({}) })
const ccc = defineModel('ccc', { default: 0 })
const { test } = props
onMounted(() => {
  console.log('ifandfor')
  console.log('props logged')
  console.log(props.test?.a)
})
watch(
  () => props.test,
  value => {
    console.log('test', value)
  },
  { deep: true }
)
setTimeout(() => {
  emit('changeValue1', 1, 2, 3)
  ccc.value = 9999
  modelValue.value.d = 8888
}, 3000)
function changeClick() {
  console.log('123')
}
</script>

<style scoped></style>
